Error with materialize in Aurelia project

Good morning,

I have a .Net Core 2.1 project that AureliaJS installs. Following the creation of the project, I followed this manual to install materialize:

link

But I have the problem that I can not use the select, apparently it is as if it was not initialized, I pass the information to the files

App.html

<template>
  <require from="materialize-css/dist/css/materialize.css"></require>
  <div class="input-field col s12">
  <select>
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label>Materialize Select</label>
</div>

App.ts

export class App {

  attached()
  {
    //Inicializar  los controles
    var element = document.querySelector("div.input-field select");
    M.FormSelect.init(element,{});
  }
}

main.js

 import { PLATFORM, Aurelia } from "aurelia-framework";
 import environment from './environment';
 import "materialize-css";

 export function configure(aurelia: Aurelia) {
   aurelia.use
     .standardConfiguration()
     .feature('resources')
        .plugin(PLATFORM.moduleName("aurelia-validation"))
     .plugin(PLATFORM.moduleName('aurelia-materialize-bridge'), b => b.useAll());

   aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

   if (environment.testing) {
     aurelia.use.plugin('aurelia-testing');
   }

   return aurelia.start().then(() => aurelia.setRoot());
 }

Visual result:

There is no combo, there are no errors in the console.

Any ideas? and thanks:)