Question

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

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

作为参考，我将包含以下配置文件，如果有任何其他帮助，请告诉我。应用的一般结构与this resource（Github repository for the library）保持不变。我通过克隆存储库并删除/替换引用来创建项目，以形成基础。

修改我见过this SO link但是如果可能的话我想避免将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文件时，我在导入此模块的应用程序中出现以下错误（post build）;

Answer 1

尝试指定html的完整路径：

// Component decorator
@Component({
  selector: 'ic-datepicker',
  encapsulation: ViewEncapsulation.None,
  templateUrl: "approot/ic-datepicker.component.html"
})

Angular2 - 具有单独模板/样式文件的库组件

1 个答案: