无法在 Plnkr 中加载 app.component.html

Question

Plnkr link: https://plnkr.co/edit/910M73kwYKc8xPlSIU57?p=preview

目录：

app.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { routes } from './app.routing';

import { AppComponent } from './app.component';
// import { LoginComponent } from './login/login.component';
// import { AuthService } from './shared/services/auth.service';


@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        RouterModule.forRoot(routes)
    ],
    declarations: [
        AppComponent,
        // LoginComponent
    ],
    providers: [
        // AuthService,
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

app.component

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    ngOnInit() {
        console.log('oninit')
    }
}

Answer 1

Angular 无法解析 app.component.html.
的相对路径 只需将 ./app.component.html 替换为 src/app.component.html 就可以了。

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

    @Component({
        selector: 'my-app',
        templateUrl: 'src/app.component.html'
    })
    export class AppComponent implements OnInit {
        ngOnInit() {
            console.log('oninit')
        }
    }

还有其他方法可以做到这一点 但是 angular-cli 或 webpack 自己处理相对路径，这是更可取的。