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

Question

Plnkr 链接：https ://plnkr.co/edit/910M73kwYKc8xPlSIU57?p=preview

目录：

应用程序.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 {}

应用程序组件

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自己处理相对路径，这是更可取的。