3

我正在使用（当前）单个组件开发第三方模块。目前我在注释中有模板和相对冗长的样式规则，@Component但这变得难以管理。我尝试将代码分解为单独的文件 ( .component.html)，但是当我运行构建过程并尝试在我的测试应用程序中使用模板 404s 中的组件时

  1. 我可以将模板拆分为单独的文件（即使构建步骤将模板的内容插入到组件注释中）。
  2. 我可以对 CSS 做同样的事情吗？
  3. 有没有办法可以用 SCSS 替换 CSS，并在将代码插入组件注释之前编译该 CSS？

作为参考，我将在下面包含配置文件，如果还有其他帮助，请告诉我！该资源（库的 Github 存储库）未更改应用程序的一般结构。我通过克隆存储库并删除/替换引用以形成基础来创建项目。

编辑 我已经看到了这个 SO 链接，但是如果可能的话，我想避免将 gulp 也集成到构建过程中。

// package.json scripts

"scripts": {
    "cleanup": "rimraf dist/bundles dist/src dist/index.d.ts dist/index.js dist/index.js.map dist/LICENCE dist/README.md",
    "bundling": "rollup -c",
    "minify": "uglifyjs dist/bundles/ic-datepicker.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/async-local-storage.umd.min.js",
    "copy": "copyfiles LICENSE README.md dist",
    "build": "npm run cleanup && ngc && npm run bundling && npm run minify && npm run copy"
  },

// rollup.config.js
export default {
  entry: 'dist/index.js',
  dest: 'dist/bundles/ic-datepicker.umd.js',
  sourceMap: false,
  format: 'umd',
  moduleName: 'ng.icDatepicker',
  globals: {
    '@angular/core': 'ng.core',
    '@angular/common': 'ng-common',
    'rxjs/Observable': 'Rx',
    'rxjs/ReplaySubject': 'Rx',
    'rxjs/add/operator/map': 'Rx.Observable.prototype',
    'rxjs/add/operator/mergeMap': 'Rx.Observable.prototype',
    'rxjs/add/operator/pluck': 'Rx.Observable.prototype',
    'rxjs/add/operator/first': 'Rx.Observable.prototype',
    'rxjs/add/observable/fromEvent': 'Rx.Observable',
    'rxjs/add/observable/merge': 'Rx.Observable',
    'rxjs/add/observable/throw': 'Rx.Observable',
    'rxjs/add/observable/of': 'Rx.Observable'
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "declaration": true,
    "stripInternal": true,
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "module": "es2015",
    "moduleResolution": "node",
    "paths": {
      "@angular/core": ["node_modules/@angular/core"],
      "rxjs/*": ["node_modules/rxjs/*"]
    },
    "allowSyntheticDefaultImports": true,
    "rootDir": ".",
    "outDir": "dist",
    "sourceMap": true,
    "inlineSources": true,
    "target": "es5",
    "skipLibCheck": true,
    "lib": [
      "es2015", 
      "dom"
    ]
  },
  "files": [
      "index.ts"
  ],
  "angularCompilerOptions": {
    "strictMetadataEmit": true
  }
}

编辑

// Component decorator
@Component({
  selector: 'ic-datepicker',
  encapsulation: ViewEncapsulation.None,
  template: `
    <!-- HTML Template -->  
  `,
  styles: [`
    // CSS styles
  `]
})

当我替换template与templateUrl: './ic-datepicker.component.html'组件类处于同一级别的 HTML 文件时，我在导入此模块的应用程序中收到以下错误（构建后）；

404 控制台错误

4

1 回答 1

-1

尝试指定 html 的完整路径，如下所示：

// Component decorator
@Component({
  selector: 'ic-datepicker',
  encapsulation: ViewEncapsulation.None,
  templateUrl: "approot/ic-datepicker.component.html"
})
于 2017-01-18T21:13:58.090 回答