Компонент styleUrls с динамически созданным компонентом

Question

Я обновил свой проект до 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, он работал с предыдущими версиями, например, angular 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" }

Любая помощь очень ценится.

Answer 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
})