我将我的项目升级到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" }
非常感谢您的帮助。
答案 0 :(得分:0)
我遇到了同样的问题: 在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
})