具有动态创建组件的组件 styleUrls答案

【问题标题】：Component styleUrls with dynamically created component具有动态创建组件的组件 styleUrls
【发布时间】：2019-05-04 17:08:02
【问题描述】：

我将我的项目升级到 angular7，一切似乎都正常，除了一件事。我在运行时创建了一个组件，项目编译成功，但在浏览器中出现以下错误：

zone.js:2969 GET http://localhost:4202/app/buildingBlocks/html-outlet/html-outlet.component.scss

core.js:14597 ERROR Error: Uncaught (in promise): Failed to load app/buildingBlocks/html-outlet/html-outlet.component.scss
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:16147)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1540)

似乎 Angular 找不到我的 .scss 文件，它适用于以前的版本，例如角度 6。

下面是运行时创建组件的相关代码：

createComponentFromRaw(template: string) {
const tempComponent = Component({ template: `${ template }`, styleUrls: ['./html-outlet.component.scss'] })(
  class {
    constructor() {}
    ngOnInit() {}
  }
);

const tempModule = NgModule({
  imports: [
    RouterModule
  ],
  declarations: [
    tempComponent
  ]
})(class {});

this.compiler.compileModuleAndAllComponentsAsync(tempModule).then((factories) => {
  const f = factories.componentFactories[1] ? factories.componentFactories[1] : factories.componentFactories[0];
  this.componentRef = f.create(this.injector, [], null, this.modulRef);
  this.componentRef.instance.name = 'my-dynamic-component';
  this.vc.insert(this.componentRef.hostView);
});}

这是我的 package.json：

"dependencies": {
"@angular/animations": "^7.1.1",
"@angular/common": "^7.1.1",
"@angular/compiler": "^7.1.1",
"@angular/core": "^7.1.1",
"@angular/forms": "^7.1.1",
"@angular/http": "^7.1.1",
"@angular/platform-browser": "^7.1.1",
"@angular/platform-browser-dynamic": "^7.1.1",
"@angular/platform-server": "^7.1.1",
"@angular/router": "^7.1.1",
"@compodoc/compodoc": "^1.1.7",
"@ng-bootstrap/ng-bootstrap": "^4.0.0",
"bootstrap": "^4.1.1",
"core-js": "^2.5.7",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"ngx-bootstrap": "^3.1.2",
"ngx-gallery": "^5.7.0",
"node-sass": "^4.9.3",
"popper.js": "^1.14.3",
"rxjs": "^6.3.3",
"sass-loader": "^7.0.1",
"tslib": "^1.9.0",
"zone.js": "^0.8.26" }

"devDependencies": {
"@angular-devkit/build-angular": "~0.11.0",
"@angular/cli": "7.1.0",
"@angular/compiler-cli": "^7.1.1",
"@angular/language-service": "^7.1.1",
"@types/jasmine": "^2.8.8",
"@types/jasminewd2": "~2.0.2",
"@types/node": "^10.12.11",
"codelyzer": "^4.5.0",
"jasmine-core": "^3.2.1",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^3.0.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^1.3.1",
"protractor": "^5.4.1",
"rxjs-tslint": "^0.1.5",
"ts-node": "~4.1.0",
"tslint": "^5.11.0",
"typescript": "3.1.6",
"webpack": "^4.19.1" }

非常感谢任何帮助。

【问题讨论】：

标签： angular url sass angular7

【解决方案1】：

我也遇到了同样的问题：在 Angular 7 迁移之后，它无法识别 scss 文件的导入（而代码在 Angular 6 中保持不变）。

我的解决方案是下一个：而不是像往常一样在动态组件中通过 'stylesUrl' 进行导入：

@Component({
      selector: 'app-my-dynamic-component',
      styleUrls: ['./my-dynamic-component.scss'],
      template: dynamicTemplate
})

我找到了下一个解决方案：

手动导入文件并插入内容（关注this）

imports
...
const dynamicStyles = require('./my-dynamic.component.scss');

并将其添加到样式中（不是 stylesUrl）

@Component({
      selector: 'app-my-dynamic-component',
      styles: [dynamicStyles],
      template: dynamicTemplate
})

【讨论】：